<template>
  <!-- 账号列表 -->
  <section class="add">
    <!-- 头部筛选区域 -->
    <section class="top">
      <el-page-header title="返回列表" @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3"> {{ headerContent }} </span>
        </template>
      </el-page-header>
    </section>
    <section class="content">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-position="top"
      >
        <el-row :gutter="100">
          <el-col :span="12">
            <el-form-item
              label="场地名称"
              prop="addressName"
              :label-width="80"
              required
            >
              <el-input
                v-model="form.addressName"
                autocomplete="off"
                placeholder="请输入场地名称"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="场地类型"
              prop="addressType"
              :label-width="80"
              required
            >
              <el-select
                v-model="form.addressType"
                placeholder="请选择场地类型"
              >
                <el-option
                  v-for="item in addressTypeList"
                  :key="item.id"
                  :label="item.addressName"
                  :value="item.id"
                />
              </el-select> </el-form-item
          ></el-col>
        </el-row>

        <el-row :gutter="100">
          <el-col :span="12">
            <el-form-item
              label="经度"
              prop="longitude"
              :label-width="80"
              required
            >
              <el-input
                v-model="form.longitude"
                autocomplete="off"
                placeholder="请输入经度"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="纬度"
              prop="latitude"
              :label-width="80"
              required
            >
              <el-input
                v-model="form.latitude"
                autocomplete="off"
                placeholder="请输入纬度"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <section class="bottom mb-4">
      <el-button @click="goBack">取消</el-button>
      <el-button
        type="primary"
        :loading="isLoading"
        @click="submitForm(formRef)"
        >确认</el-button
      >
    </section>
  </section>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addRequest, updateRequest } from "@/apis/address.js";
import { queryListRequest as queryAddressTypeList } from "@/apis/addressType.js";
const router = useRouter();
const route = useRoute();
const optionType = route.query.type;
// header的内容
let headerContent = "新增场地";
// form表单参数
const ruleFormRef = ref(null);
let form = reactive({
  addressName: "", //场地类型名称
  addressType: "", //场地类型
  longitude: "", //经度
  latitude: "", //纬度
  addressDetail: "", //详细地址
});
if (optionType == "edit") {
  headerContent = "编辑场地";
  let editObj = JSON.parse(route.query.rowData);
  form.id = editObj.id;
  Object.keys(form).forEach((item) => {
    if (editObj[item]) {
      form[item] = editObj[item];
    }
  });
}
// form 表单规则
const rules = reactive({
  addressName: [
    { required: "true", message: "请输入场地名称", trigger: "blur" },
  ],
});

// // 场地类型列表
const addressTypeList = ref([]);
queryAddressTypeList().then((res) => {
  addressTypeList.value = res.data;
});

// 提交loading
let isLoading = ref(false);
// form提交函数
const submitForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      // 打开loding
      isLoading.value = true;
      // 请求接口
      if (optionType == "edit") {
        await updateRequest(form);
      } else {
        await addRequest(form);
      }
      // 关闭loading
      isLoading.value = false;
      // 路由返回
      goBack();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
//  路由返回函数
const goBack = () => {
  router.back();
};
</script>
<style lang="less" scoped>
.add {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .top {
    display: flex;
    .el-input {
      width: 300px;
      margin-right: 20px;
    }
  }
  .content {
    width: 100%;
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .bottom {
    display: flex;
    justify-content: end;
  }
}
</style>
